import { Space } from 'antd';
import type { FC } from 'react';
import { ProFormText, ProFormSelect, ProForm } from '@ant-design/pro-components';
import EditModal, { type EditModalProps } from '../EditModal';
import { patternMoreThan0Integer } from '@/utils/formRule';
import type { MoveSeatsOptions } from '../Canvas/types';

const xEnum = {
  left: '向左',
  right: '向右',
}

const yEnum = {
  top: '向上',
  bottom: '向下'
}

const selectProps = { style: { width: 110 } };

const EditMoveSeat: FC<EditModalProps<MoveSeatsOptions>> = (props) => {
  return (
    <EditModal
      {...props}
      width={280}
      title="设置移动座位"
    >
      <ProForm.Item label="x轴">
        <Space.Compact>
          <ProFormSelect
            noStyle
            allowClear={false}
            initialValue="right"
            valueEnum={xEnum}
            name={['column', 'direction']}
            fieldProps={selectProps}
          />
          <ProFormText
            noStyle
            name={['column', 'step']}
            rules={[
              patternMoreThan0Integer
            ]}
          />
        </Space.Compact>
      </ProForm.Item>
      <ProForm.Item label="y轴">
        <Space.Compact>
          <ProFormSelect
            noStyle
            allowClear={false}
            valueEnum={yEnum}
            fieldProps={selectProps}
            name={['row', 'direction']}
            initialValue="bottom"
          />
          <ProFormText
            noStyle
            name={['row', 'step']}
            rules={[
              patternMoreThan0Integer
            ]}
          />
        </Space.Compact>
      </ProForm.Item>
    </EditModal>
  );
}

export default EditMoveSeat;
